<template>
    <!-- 每个元素的两侧间隔相等 -->
    <div class="item" @click="todetail">
        <img id="img1" :src="list.img_src" @load="isLoadOk" >
        <div class="content">
            <p>{{list.song_name}} &nbsp;{{list.author}}</p>
        </div>
    </div>
</template>

<script>
    // import { Col, Row } from 'vant';

    export default {
        name: "Music_item",
        data(){
            return{

            }
        },
        props:{
            list:{
                type:Object,
                default:{}
            }
        },
        mounted() {
            console.log(this.list);
        },
        methods:{
            todetail(){
                this.$router.push("/mobile/home/music/"+this.list.id)
            },
            isLoadOk(){
               this.$bus.$emit('music_ok')
            }
        }
    }
</script>

<style scoped>
    .item{
        position: relative;
        padding-bottom: 40px;
        width: 40%;
    }
    .item img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .item .content{
        position: absolute;
        /*bottom: 5px;*/
        left: 0px;
        right: 0px;
        font-size: 13px;
        text-align: center;
        overflow: hidden;
    }
    .content p {
        /*font-size: 2em;*/
    }
</style>